<!-- 加工商对账表 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<u-scroll-list :indicator="false" class="p-b-0">
			<view class="top-view p-t-20">
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 前欠 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.originDebt||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 加工额 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.canUsePiecesCount||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 退货额 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.canUseQuantity||0}} </view>
					</view>
				</view>
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 付款额 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.originDebt||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 其他额 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.canUsePiecesCount||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 累欠 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.debtTotal||0}} </view>
					</view>
				</view>
			</view>
		</u-scroll-list>
		<u-sticky offset-top="0">
		  <c-time @success="timeSuccess" defaultTime="setThisMonth">
		    <view class="flex s-content" slot="content">
		      <view class="check-account flex flex-dlii select-item"
		        @click="goRoute('pages/application/pages/cloth/sales-ticket/index?page=return&type=return')">
		        <!-- <text class="grey p-r-10">{{ billId.data.keywords || '选客户' }}</text> -->
		        <!-- <u-icon v-if="!billId.data.keywords" name="arrow-down-fill" color="#ccc" size="10"></u-icon>
		        <text class="c-99" v-else>x</text> -->
		      </view>
		    </view>
		  </c-time>
		</u-sticky>
		
		<view class="list-view p-t-20">
			<view class="item-view" v-for="(item,index) in indexList" :key="item.id" @click="toNext(item)">
				<view class="name">
					{{item.name}}
				</view>
				<view class="dl-view m-b-20 flex">
					<view class="dt-view">
						<text class="grey">前欠</text>
						<text class="p-l-6">{{item.originDebt?'-'+item.originDebt:0}}</text>
					</view>
					<view class="dd-view">
						<text class="grey">累欠</text>
						<text class="p-l-6">{{item.debtTotal?'-'+item.debtTotal:0}}</text>
					</view>
				</view>
				<view class="info-list">
					<view class="dl-item">
						<view class="dt">
							<text class="grey">加工额</text>
							<text class="p-l-6">0</text>
						</view>
						<view class="dd">
							<text class="grey">退货额</text>
							<text class="p-l-6">0</text>
						</view>
					</view>
					<view class="dl-item">
						<view class="dt">
							<text class="grey">付款额</text>
							<text class="p-l-6">0</text>
						</view>
						<view class="dd">
							<text class="grey">其他额</text>
							<text class="p-l-6">0</text>
						</view>
					</view>
					<view class="dl-item">
						<view class="dt">
							<text class="grey">加工匹</text>
							<text class="p-l-6">0</text>
						</view>
						<view class="dd">
							<text class="grey">加工数</text>
							<text class="p-l-6">0</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <loading-finished v-if="isLoadFinished"></loading-finished> -->
			<u-loadmore dashed line :status="status" loadingText="努力加载中" loadmoreText="轻轻上拉" nomoreText="实在没有了" />
		</view>
	</view>
</template>

<script>
	import cTime from '@/pages/application/pages/finance/accounts-receivable-payable/components/time.vue'
	import { listDataGroupByProcessorPage } from "@/apis/bill/reconciliation";
	// import loadingFinished from '@/components/loading-finished/index.vue'
	export default {
		name: 'Custom',
		components: {
		  cTime,
		  // loadingFinished
		},
		data() {
			return {
				config: {
				  title: "加工商对账表",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				total_data: {},
				params: {
					data: {"catId":null,"shopId":null},
					page: {
						current: 1,
						size: 999,
						order: "desc"
					}
				},
				indexList: [],
				time: '',
				total: 0,
				// isLoadFinished: false
				status: 'loadmore',
			}
		},
		onLoad() {
			this.getList()
			// 客户
			uni.$on('on-sales-ticket', data => {
			  
			})
		},
		onUnLoad() {
			uni.$off("on-sales-ticket")
		},
		onReachBottom() {
			if(this.indexList.length<this.total) {
				// this.isLoadFinished = false;
				this.status = 'loadmore'
				this.params.page.current++
				this.getList()
			} else {
				// this.isLoadFinished = true;
				this.status = 'nomore'
			}
		},
		methods: {
			clickBtn(item) {
			  // if (item.key === "btn1") {
			  //   this.show = true
			  // }
			},
			// 获取时间参数
			timeSuccess(val) {
			  this.time = `${val[0]}~${val[1]}`
			},
			// 路由跳转
			goRoute(item, index, url) {
				uni.navigateTo({
				  url: url
				})
			},
			// 列表
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				listDataGroupByProcessorPage(this.params).then(res=>{
					if (!res.flag) return;
					const data = res.data || {};
					this.total_data = data.footerTotal||{};
					this.total = data.total || 0;
					if (this.params.page.current == 1) {
					  this.indexList = data.records;
					} else {
					  this.indexList = [...data.records, ...this.indexList];
					}
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 跳转下一页
			toNext(val) {
				let {id, name} = val;
				uni.navigateTo({
					url: `/pages/application/pages/finance/reconciliation/processor/list?supplierId=${id}&supplierName=${name}&time=${this.time}`
				})
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
		.t_item {
			flex: 1;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				width: 1rpx;
				height: 70%;
				background: #dfdfdf;
			}
			&:last-child {
				&::after {
					content: "";
					width: 0rpx;
				}
			}
		}
		.more-view {
			justify-content: center;
			height: 80rpx;
			align-items: center;
		}
	}
	.list-view {
		.item-view {
			background: #fff;
			padding: 20rpx;
			.name {
				font-weight: bold;
				padding-bottom: 10rpx;
			}
			.dl-view {
				justify-content: space-between;
			}
			.info-list {
				background: #f2f2f2;
				padding: 20rpx;
				.dl-item {
					display: flex;
					padding-bottom: 8rpx;
					.dt, .dd {
						flex: 1;
					}
				}
			}
		}
	}
</style>

